<template>
	<view class="page">
		<!-- 顶部背景 -->
		<view class="home_bg_img">
			<image mode="aspectFill"
				:src="xcxImgUrl && xcxImgUrl+'home/bg_top.svg'"></image>
		</view>
		<!-- 导航栏 -->
		<navBar>
			<text :slot="'left'" style=" width: 800px">{{homeTitle}}</text>
		</navBar>
		<!-- 搜索栏 -->
		<view>
			<search :showLeft="true"
				:showRight="true"
				:bgColor="'#fff'">
				<image @click="toSaoyisao"
					style="width: 48rpx;height: 48rpx;"
					:slot="'left'"
					:src="xcxImgUrl && xcxImgUrl+'home/saoyisao.svg'"></image>
				<image @click.stop="toMessage"
					style="width: 48rpx;height: 48rpx;"
					:slot="'right'"
					:src="xcxImgUrl && xcxImgUrl+'home/xiaoxi.svg'">
				</image>
				<u-badge style="position: absolute;top: 0;left:0;"
					:slot="'right'"
					:isDot="msgQty ? true : false"
					type="error"></u-badge>
			</search>
		</view>
 
		<!-- 主体可滑动区域 			-->
		<scroll-view class="home_main pd_lr10"
			scroll-y
			@scrolltolower="scrolltolower"
			:style="{'height': 'calc(100vh - ' + top +')'}">

			<view v-for="(item,index) in sortList"
				:key="index">

				<!-- 轮播图 -->
				<view class=" swiper mt10"
					v-if="item.type == 1">
					<u-swiper indicator
						indicatorMode="line"
						circular
						radius="20rpx"
						height="300rpx"
						width="100%"
						@change="e => swiperIndex = e.current"
						@click="tapSwiperItem(item,$event)"
						:list="swiperList"
						keyName="url"
						:autoplay="true"></u-swiper>
				</view>

				<!-- 功能主题 -->
				<view class="mt10 "
					v-if="item.type == 2">
					<view class="tuijian">
						<view class="tuijian_item"
							v-for="(itgnzt,indgnzt) of modulesList(item)"
							@click="toTuijian(itgnzt)"
							:key="indgnzt">
							<image class="itme_img"
								:src="itgnzt.url ? uploadImgUrl + itgnzt.url : updateMorentu">
							</image>
							<text
								style="text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width:90%">{{itgnzt.name ? itgnzt.name : ''}}</text>
						</view>
					</view>
				</view>
              <!-- 消息通知 -->
			 <view class="mt10 news"
			 		v-if="item.type == 2">
						  	<view class="news_left">
						  		<image src="/static/newpic/news.svg" style="width: 100%;height: 100%;"></image>
						  	</view>
							<view class="" style="margin-left: 14rpx; margin-right: 160rpx;">
								2020年骓云再创辉煌，拿下50个亿
							</view>
							<view class="news_right" @click="toNews">
								<image src="/static/newpic/right.svg"></image>
							</view>
			 </view>
				<!-- 图文关联 -->
				<view class="mtb10 "
					v-if="item.type == 3">

					<!-- 一张图 -->
					<view class="oneImg"
						v-if="item.tag == 1">
						<view class="one_left"
							@click="toSearch(item,1)">
							<!-- <image mode="aspectFill"
								src="@/static/home/lunbotu1.svg"></image> -->
							<image mode="widthFix"
								:src="item.value && item.value.length && item.value[0].url ? uploadImgUrl + item.value[0].url :  updateMorentu">
							</image>
						</view>
					</view>


					<!-- 两张图 -->
					<view class="towImg"
						v-if="item.tag == 2">
						<view class="tow_left "
							@click="toSearch(item,1)">
							<!-- <image mode="aspectFill"
								src="@/static/home/lunbotu1.svg"></image> -->
							<image mode="aspectFill"
								:src="item.value && item.value.length && item.value[0].url ? uploadImgUrl + item.value[0].url :  updateMorentu">
							</image>
						</view>
						<view class="tow_right ml5"
							@click="toSearch(item,2)">
							<!-- <image mode="aspectFill"
								src="@/static/home/lunbotu1.svg"></image> -->
							<image mode="aspectFill"
								:src="item.value && item.value.length && item.value[1].url ? uploadImgUrl + item.value[1].url :  updateMorentu">
							</image>
						</view>
					</view>

					<!-- 三张图 -->
					<view class="threeImg"
						v-if="item.tag == 3">
						<view class="three_left mr10"
							@click="toSearch(item,1)">
							<!-- <image mode="aspectFill"
								src="@/static/home/lunbotu1.svg"></image> -->
							<image mode="aspectFill"
								:src="item.value && item.value.length && item.value[0].url ? uploadImgUrl + item.value[0].url :  updateMorentu">
							</image>
						</view>
						<view class="three_right">
							<view class="three_right_top"
								@click="toSearch(item,2)">
								<!-- <image mode="aspectFill"
									src="@/static/home/lunbotu1.svg"></image> -->
								<image mode="aspectFill"
									:src="item.value && item.value.length && item.value[1].url ? uploadImgUrl + item.value[1].url :  updateMorentu">
								</image>
							</view>
							<view class="three_right_bottom mt10"
								@click="toSearch(item,3)">
								<!-- <image mode="aspectFill"
									src="@/static/home/lunbotu1.svg"></image> -->
								<image mode="aspectFill"
									:src="item.value && item.value.length && item.value[2].url ? uploadImgUrl + item.value[2].url :  updateMorentu">
								</image>
							</view>
						</view>
					</view>
				</view>

				<!-- 品牌专区 -->
				<view class=""
					v-if="item.type == 4">
					<view class="pingpai">
						<view class="pinpai_top">
							<view>
								<image style="width: 36rpx;height: 36rpx;margin-right: 10rpx;vertical-align: bottom ;"
									:src="xcxImgUrl && xcxImgUrl+'home/pingpai_logo.svg'"></image>
								<text class="top_title">品牌专区</text>
							</view>
							<view class=""
								@click="toBrand"
								v-if="pinpaiTotal > 8">
								<text class="top_genduo">更多</text>
								<image style="width: 24rpx;height: 24rpx;margin-left: 10rpx;"
									:src="xcxImgUrl && xcxImgUrl+'home/gengduo.svg'"></image>
							</view>
						</view>
						<view class="pinpai_btn mt10">
							<view class="pinpai_item"
								@click="toSearch('搜索',ppit)"
								v-for="(ppit,ppin) of pinpaiList"
								:key="ppin">
								<image style="width: 88rpx;height: 88rpx;"
									:src="ppit.picture ? uploadImgUrl + ppit.picture : updateMorentu"></image>
								<text>{{ppit.name}}</text>
							</view>

						</view>
					</view>
				</view>

				<!-- 活动专区 -->
				<view @click="toActive"
					class="mtb10"
					v-if="item.type == 5">
					<view class="huodongone_img">
						<!-- <image src="/static/home/lunbotu1.svg"
							mode="aspectFill"></image> -->
						<image mode="widthFix"
							:src="item.value ? uploadImgUrl + item.value : updateMorentu"></image>
					</view>

				</view>

				<!-- 猜你喜欢 -->
				<view class="doyoulike mtb10"
					v-if="item.type == 6">
					<view class="doyoulike_title">
						<image style="width: 100%;height: 100%;"
							:src="xcxImgUrl && xcxImgUrl+'home/u248.svg'"
							mode="aspectFill">
						</image>
					</view>

					<!-- 列表 -->
					<view class="doyoulike_list mt10">

						<view style="width:calc(50% - 10rpx)">
							<view style="padding: 10rpx 0;"
								v-for="(cnit,icin) of cainixihuanList"
								:key="icin"
								v-if="icin % 2 ===0">
								<guessWhatYouLike :item="cnit"
									ref="guseeLike"></guessWhatYouLike>
							</view>
						</view>
						<view style="width:calc(50% - 10rpx)">
							<view style="padding: 10rpx 0;"
								v-for="(cnit,icin) of cainixihuanList"
								:key="icin"
								v-if="icin % 2 !==0">
								<guessWhatYouLike :item="cnit"
									ref="guseeLike"></guessWhatYouLike>
							</view>
						</view>
					</view>
				</view>


			</view>

		</scroll-view>
		<!-- 绑定手机号弹出层 -->
		<bindingPhoneNumber :bindingPhoneNumberShow='bindingPhoneNumberShow'
			@close='bindingPhoneNumberlose'
			@save='bindingPhoneNumberSave'
			v-if="bindingPhoneNumberShow"
			:noOpen="noOpen"></bindingPhoneNumber>

		<!-- 职员邀请 -->
		<u-modal :show="staffShow"
			:title="'加入职员账户'"
			:confirmText="'绑定'"
			@confirm="agree"
			showCancelButton="true"
			@cancel="staffShow = false">
			<view>
				<view>{{staffInviteInfo && staffInviteInfo.name || `-`}}邀请您加入职员账户</view>
				<u-form ref="uForm"
					:rules="rules"
					:model="staffInfo">
					<u-form-item label-width="130rpx"
						prop="phone"
						label="手机号:">
						<u-input v-model="staffInfo.phone"
							maxlength="11"
							placeholder="请输入手机号"></u-input>
					</u-form-item>
					<u-form-item label-width="130rpx"
						label="验证码:"
						prop="verify">
						<u-input v-model="staffInfo.verify"
							placeholder="请输入验证码">
							<template slot="suffix">
								<u-code ref="uCode"
									@change="codeChange"
									seconds="20"
									changeText="X秒重新获取哈哈哈"></u-code>
								<u-button @tap="getCode"
									:text="tips"
									type="success"
									size="mini">获取验证码</u-button>

							</template>
						</u-input>
					</u-form-item>
				</u-form>
				
			</view>
		</u-modal>
		<!-- 领劵弹框 -->
		<view class="coupon">
			<u-popup :show="showCoupon"
				@close="closeCoupon"
				:zIndex="10000"
				mode="center">
				<view class="coupon_title">
					<image mode="aspectFill"
						src="/static/newpic/coupon.svg"></image>
				</view>
				<view class="coupon_content">
					<scroll-view scroll-y
					 @scrolltolower="scrolltolowerCoupon"
						class="coupon_lists">
						<view class="coupon_list" v-for="(item,index) in orderList" :key="index">
							<view style="width:560rpx; height: 160rpx;">
								<image class=""
									src="/static/newpic/couponBg.svg"
									style="width: 100%;height: 100%;"></image>
							</view>
							<view class="list">
								<view class="content_left">
									<text style="font-size: 28rpx;color: #F33340;">￥</text>
									<text style="font-size: 40rpx;font-weight: 700;color: #F33340;">{{item.faceMoney}}</text>
								</view>
								<view class="content_right">
									<view class="content_title">
										<view class="content_title1">{{item.name}}</view>
										<view class="content_title3">有效期至: {{ item.overdueType == 1 ? Utils.DateFormateTime(item.overdueDate,'nyr') : item.overdueTime}}</view>
									</view>
								</view>
							</view>
							
						</view>
					</scroll-view>
					<view class="get_coupon">
						<image mode="aspectFill"
							src="/static/newpic/getCoupon.svg"></image>
					</view>
				</view>
                      <view style="width:48rpx;height:48rpx;margin-left:280rpx;margin-top:20rpx" @click="showCoupon = false">
						<image mode="aspectFill"
						style="height: 24px;width: 24px;"
						src="/static/newpic/del.svg"></image>
						</view >
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		masonry
	} from '@dcloudio/uni-ui';
	import {
		listMallParameter,
		getMallParameterByKey,
		listMallCommodityBrandPageInfo,
		listMallCommodityActivityPageInfo,
		listMallCommodityActivityCommodityPageInfo,
		listMobileCommodityPageInfo,
		getMallMessageUnreadQty,
		sendVerificationCode,
		getCatCount,
		getCouponActivity,
		getMemberInfo as getMemberInfoApi,
		inviteChildAccount
	} from '@/api/global.js'
	import {
		uploadImgUrl
	} from "@/utils/request.js"
	import bindingPhoneNumber from '@/components/bindingPhoneNumber/bindingPhoneNumber.vue'
	import {
		mapGetters
	} from 'vuex'
	import socketIO from "@/utils/socket.js"
	import utils from "@/utils/uitls.js"
	export default {
		components: {
			bindingPhoneNumber,
		},

		computed: {
			...mapGetters(['top']),
			//返回默认图 兼容小程序 直接在html写vuex不生效
			updateMorentu() {
				return this.$store.state.morentu
			},
			modulesList() {
				return (item) => {
					return item.value && item.value.filter(v => v.status == 1)
				}
			}
		},
		data() {
			return {
				inputVal: '12',
				homeTitle: '', //商城名字
				showCoupon: true, //优惠卷弹框
				catCountlly: '',
				staffInviteInfo: ``,
				tips: 0,
				rules: {
					'phone': [{
							type: 'string',
							required: true,
							message: '请输入手机号码',
							trigger: ['blur', 'change']
						}, {
							len: 11,
							message: '手机号码长度为11位',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'verify': {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
				},
				staffShow: false,
				staffInfo: {
					phone: ``,
					verify: ``
				},
				noOpen: false,
				leftList: [],
				rightList: [],
				bindingPhoneNumberShow: false, //绑定手机号弹出层
				sortList: [], //保存获得排序的列表顺序
				uploadImgUrl, //图片前缀
				socketIo: null,
				// list4: [{
				// 	url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
				// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				// 	poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				// }, { 
				// 	url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				// 	title: '身无彩凤双飞翼，心有灵犀一点通'
				// }, {
				// 	url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// }],
				swiperList: [], //轮播图集合
				swiperIndex: 0, //轮播图下标
				// tuijian: [{
				// 		title: '每日推荐',
				// 		src: '/static/home/meirituijian.svg'
				// 	},
				// 	{
				// 		title: '热卖专区',
				// 		src: '/static/home/meirituijian.svg'
				// 	},
				// 	{
				// 		title: '客户常购',
				// 		src: '/static/home/meirituijian.svg'
				// 	},
				// 	{
				// 		title: '新品上市',
				// 		src: '/static/home/meirituijian.svg'
				// 	},
				// 	{
				// 		title: '新人有礼',
				// 		src: '/static/home/meirituijian.svg'
				// 	}
				// ],
				pinpaiList: [], //品牌列表
				pinpaiTotal: 0, //品牌总数
				cainixihuanList: [], //猜你喜欢列表
				leftList: [],
				rightList: [],
				cainixihuanLastPage: 0, //猜你喜欢总页数
				cainixihuanPageDate: {
					currentPage: 1,
					pageSize: 10
				},
				cainixihuanSearchParams: {
					search: '',
					brandId: '', //商品品牌id
					tag: '', //猜你喜欢类型：[1.按商品销量  2.按商品上架时间  3.按商品点击量  4.自定义]
					objectType: '', //对象类型[1：商品id 2：商品品牌id 3：商品分类id]
					warehouseId: '', //仓库id[关联仓库表]
					sort: '',
				},
				msgQty: 0, //红点消息数量
				isLoad: false,
				pageData: {
					currentPage: 1,
					pageSize: 10
				},
				searchParams: {
					sort: 1,
					mark: 1
				},
				orderList:[], //优惠卷列表
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.log(options, 'homeoptions');
			if (options?.scene) { //职员邀请
				let path = decodeURIComponent(options?.scene);
				path = path.split('_');
				if (path[1] == 3) {
					this.getMemberInfo(path[0]);
					this.staffShow = true;
					uni.setStorageSync('staffInviteId', path[0]);
				} else if (path[1] == 1) {
					uni.navigateTo({
						url: `/page_public/commodityDetail?commodityId=${path[0]}&scan=1&option=${options?.noOpen}`
					})
				}
			}
			if (options?.noOpen) {
				this.noOpen = options?.noOpen;
			}
			this.isLoad = true;
			console.log(89, uni.getStorageSync('visitorLoginInfo'))
			if (uni.getStorageSync('visitorLoginInfo')) {
				if (this.noOpen) {
					this.bindingPhoneNumberShow = true;
					uni.hideTabBar({});
					return;
				}
				this.bindingPhoneNumberShow = false;
				uni.showTabBar({});

				if (JSON.parse(uni.getStorageSync('visitorLoginInfo')).MallMember.status == 1) {
					// await this.$onLaunched; //等app.vue执行完 调用接口
					this.$store.dispatch('configSetting/getSetting');
					await this.getSort() //获取排序
					await this.getPinHuoCai() //获取对应的数据
					await this.getMessage()
				} else {
					//获取商城系统参数设置
					this.$store.dispatch('configSetting/getSetting');
					await this.getSort() //获取排序
					await this.getPinHuoCai() //获取对应的数据
					await this.getMessage()

				}
			} else {
				this.bindingPhoneNumberShow = true;
				uni.hideTabBar({});
				return;
			}
		},
		async onShow() {
			this.getName()
			this.getList()
			await this.$onLaunched;
			this.$nextTick(() => {
				//获取高度
				this.Utils.getDemoTopHeight('home_main')
				// let info = uni.createSelectorQuery().in(this).select('.home_main');
				// info.boundingClientRect((data) => { //data - 各种参数
				// 		this.$store.commit('updateSearchTop',data.top)
				// 		console.log(data, 'vuex') // 获取元素宽度
				// }).exec()
			})
			if (this.isLoad) return;
			console.log(uni.getStorageSync('visitorLoginInfo'), 999)
			// if (!uni.getStorageSync('visitorLoginInfo')) { //未开启游客
			// 	this.bindingPhoneNumberShow = true;
			// 	uni.hideTabBar({})
			// 	return;
			// } else {
			// uni.showTabBar({});
			// this.bindingPhoneNumberShow = false;
			if (uni.getStorageSync('visitorLoginInfo')) {
				if (JSON.parse(uni.getStorageSync('visitorLoginInfo')).MallMember.status == 1) {

					this.$store.dispatch('configSetting/getSetting');
				} else {
					//获取商城系统参数设置
					this.$store.dispatch('configSetting/getSetting');
				}
				this.cainixihuanSearchParams.warehouseId = this?.$store?.state?.warehouseInfo?.warehouseId || '';
				await this.getSort();
				await this.getPinHuoCai() //获取对应的数据
				await this.getMessage()
				this.getWebsocketData() //websocket链接
				


			}
			// }

		},
		onHide() {
			this.isLoad = false;
			this.socketIo && this.socketIo.Close();
			this.socketIo ? this.socketIo.traderDetailIndex = 100 : '' // 初始化 tabIndex 
			// this.$refs.guseeLike.closePop()
			this.$store.commit('updateSearch', '')
		},
		provide() {
			return {
				resetList: this.resetList
			}
		},
		methods: {
				// 去消息界面
			toNews(){
				uni.navigateTo({
					url: `/page_public/news`
				})
			},
			// 商城名字
			async getName() {
				let {
					data
				} = await listMallParameter({
					type: 7
				})
				const titles = data.info.filter(item => item.key == 'mall_parameter_35')[0].parameter
				this.homeTitle = JSON.parse(titles).name || '大麦商城'

			},
			// 购物车数量改变
			resetList() {
				console.log('resetList')
				this.cainixihuanPageDate = {
						currentPage: 1,
						pageSize: 10
					},
					this.getCainixihuanList()
			},
			// 获取会员信息
			async getMemberInfo(id) {
				console.log(id, uni.getStorageSync('userAllId'), uni.getStorageSync('userAllId'), '职员接口参数');
				let res = await getMemberInfoApi({
					memberId: id,
					bussinessId: uni.getStorageSync('userAllId') ? JSON.parse(uni.getStorageSync('userAllId'))
						.bussinessId : ``,
					accountId: uni.getStorageSync('userAllId') ? JSON.parse(uni.getStorageSync('userAllId'))
						.accountId : ``
				})
				console.log(res, res.data.info, '职员信息名字');
				if (res.code == 2000) {
					this.staffShow = true
					this.staffInviteInfo = res.data.info || ``;
				} else {
					if (res.code !== -1) {
						this.Utils.toast(`${res.msg}`);
					}

				}
			},
			//职员弹框确认
			async agree() {
				let config = await this.$refs.uForm.validate()
				console.log(uni.getStorageSync('staffInviteId'), 'parentId');
				if (config) {
					let res = await inviteChildAccount({
						parentId: uni.getStorageSync('staffInviteId'),
						phone: this.staffInfo.phone,
						verificationCode: this.staffInfo.verify
					})
					if (res.code == 2000) {
						this.Utils.toast(`邀请成功`);
						this.staffShow = false;
					} else {
						this.Utils.toast(`${res.msg}`);
					}
				}

			},
			getCode() {
				this.$refs.uForm.validateField('phone', (res) => {
					if (res.length == 0) {
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							sendVerificationCode({
								phone: this.staffInfo.phone,
								tag: 2
							}).then(resr => {
								if (resr.code == 2000) {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								} else {
									uni.hideLoading();
									this.Utils.toast(`${resr.msg}`)
								}

							})

						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}
				})

			},
			codeChange(text) {
				this.tips = text;
			},
			a(data) {
				this.leftList = data.a;
				this.rightList = data.b;
			},
			//关闭绑定手机号弹出
			bindingPhoneNumberlose() {
				this.bindingPhoneNumberShow = false
			},
			//手机号弹窗框确认
			async bindingPhoneNumberSave() {
				//关闭弹窗
				this.noOpen = false;
				this.bindingPhoneNumberShow = false;
				uni.showTabBar({});
				this.$nextTick(() => {
					//获取高度
					this.Utils.getDemoTopHeight('home_main')
					// let info = uni.createSelectorQuery().in(this).select('.home_main');
					// info.boundingClientRect((data) => { //data - 各种参数
					// 		this.$store.commit('updateSearchTop',data.top)
					// 		console.log(data, 'vuex') // 获取元素宽度
					// }).exec()
				})
				console.log(uni.getStorageSync('visitorLoginInfo'))
				if (uni.getStorageSync('visitorLoginInfo')) {
					if (JSON.parse(uni.getStorageSync('visitorLoginInfo')).MallMember.status == 1) {
						await this.$onLaunched; //等app.vue执行完 调用接口
						this.$store.dispatch('configSetting/getSetting');
					} else {
						console.log('1222')
						//获取商城系统参数设置
						this.$store.dispatch('configSetting/getSetting');
					}
					await this.getSort();
					await this.getPinHuoCai() //获取对应的数据
					await this.getMessage()
					this.getWebsocketData() //websocket链接
				}
			},
			//第一次获取未读消息
			async getMessage() {
				let res = await getMallMessageUnreadQty()
				if (res.code == 2000) {
					this.msgQty = res?.data?.info
				}
			},
			//初始化长连接 获取及时消息推送
			getWebsocketData() {
				// let url = 'ws://192.168.1.37:82'
				// let url = 'ws://192.168.1.21:83'
				let url = 'wss://erp.zhuiyun.net/erpc'
				this.socketIo = new socketIO('', '', url)
				// 要发送的数据包
				let msg = {
					"event_type": "message_101",
					"msg": "",
					"data": ""
				}
				// 打开连接
				this.socketIo.connectSocketInit(msg)
				// 接收数据
				uni.$on("getPositonsOrder", (res) => {
					console.log(res.data.unreadQty);
					this.msgQty = res.data.unreadQty
				})
				// 错误时做些什么
				uni.$on("connectError", () => {
					this.connect = false
					this.scoketError = true
				})
			},
			//去商品详情
			toDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: `/page_public/commodityDetail?commodityId=${item.commodityId}`
				})
			},
			//根据key获取排序
			async getSort() {
				let res = await getMallParameterByKey({
					key: 'mall_home_page'
				})
				console.log(res);
				if (res.code == 2000) {
					this.sortList = JSON.parse(res?.data?.info?.parameter || [])
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//循环排序 判断列表中是否添加 品牌 活动 猜你喜欢 单独调用接口 获取数据
			getPinHuoCai() {
				this.sortList.forEach(async item => {
					//type == 1 轮播图 
					if (item.type == 1) {
						this.swiperList = [];
						item.value.forEach(it => {
							this.swiperList.push({
								url: it.video ? this.uploadImgUrl + it.video : it.url ? this
									.uploadImgUrl + it.url : this.$store.state.morentu
							})
						})
					}
					//type == 4 品牌 //取前8
					if (item.type == 4) {
						let ppRes = await listMallCommodityBrandPageInfo({
							sort: 3,
							currentPage: 1,
							pageSize: 20
						})
						this.pinpaiList = ppRes?.data?.info?.list.slice(0, 8) || []
						this.pinpaiTotal = ppRes?.data?.info?.total || 0
					}
					//type == 5 活动
					// if(item.type == 5){ 
					// 	// let hdRes = await listMallCommodityActivityPageInfo()
					// }

					// type == 6 猜你喜欢
					if (item.type == 6) {
						this.cainixihuanSearchParams.tag = item?.value?.tag || ''
						if (this.cainixihuanSearchParams.tag == 4) { //自定义
							this.cainixihuanSearchParams.objectType = item?.value?.type || ''
							//获取分仓仓库id 没有后台默认全部
							this.cainixihuanSearchParams.warehouseId = this?.$store?.state?.warehouseInfo
								?.warehouseId || ''
						}
						//保存首页猜你的喜欢的条件 购物车页面的猜你喜欢和这个条件一样
						this.$store.commit('updateCainixihuanSearchParams', this.cainixihuanSearchParams)
						this.cainixihuanPageDate.currentPage = 1;
						await this.getCainixihuanList()
						await this.getCatToally()
					}
				})
			},
			//获取猜你喜欢列表
			async getCainixihuanList() {
				uni.showLoading()
				let res = await listMobileCommodityPageInfo({
					...this.cainixihuanPageDate,
					...this.cainixihuanSearchParams,
					markTag: 2
				})
				if (res.code == 2000) {
					uni.hideLoading()
					if (this.cainixihuanPageDate.currentPage == 1) {
						this.cainixihuanList = (res?.data?.info?.list || []).filter(item => item.status !== 2);
					} else {
						this.cainixihuanList = (this.cainixihuanList.concat(res?.data?.info?.list || [])).filter(
							item => item.status !== 2);
					}

					this.cainixihuanLastPage = res?.data?.info?.lastPage
				} else {
					this.Utils.toast(`${res.msg}`)
				}

			},
			// 获取购物车数量
			async getCatToally() {
				const {
					data
				} = await getCatCount({
					type: 1
				})
				if (data.info > 0) {
					uni.setTabBarBadge({
						index: 2,
						text: data.info.toString()
					})
				}
			},
			//获取优惠卷弹框列表
			async getList() {
				uni.showLoading()
				let res = await getCouponActivity({
					...this.searchParams,
					...this.pageData
				})
				if (res.code == 2000) {
					uni.hideLoading()
					if (this.pageData.currentPage == 1) {
						this.orderList = (res?.data?.info?.list || [])
					} else {
						this.orderList = this.orderList.concat(res?.data?.info?.list || [])
					}
					this.lastPage = res?.data?.info?.lastPage
					this.orderList = this.orderList.map(item => {
						return {
							...item,
							overdueTime: this.Utils.addDate(item.overdueDay)
						}
					})
				}
			},
			// 滚动到底部事件
			scrolltolower() {
				this.cainixihuanPageDate.currentPage++
				if (this.cainixihuanPageDate.currentPage > this.cainixihuanLastPage) {
					return
				} else {
					// 获取单据列表
					this.getCainixihuanList()
				}
			},
				//滚动到底部事件
			scrolltolowerCoupon(){
				if (this.pageData.currentPage > this.lastPage) {
					return
				} else {
					// 获取单据列表
				this.pageData.currentPage++
					this.getActiveList()
				}
			},
			//点击轮播图
			tapSwiperItem(item, e) {
				item.value.forEach((it) => {
					if (it.video.length > 0) {

					}
				})
				item.value.forEach(async (v, i) => {
					if (e == i) {
						if (v.mark == 1) {
							return;
						} else if (v.mark == 2) {
							uni.navigateTo({
								url: `/page_public/commodityDetail?commodityId=${v.objectId}`
							})
						} else if (v.mark == 3) {
							let res = await listMallCommodityActivityCommodityPageInfo({
								currentPage: 1,
								pageSize: 4,
								activityId: v.objectId,
								warehouseId: this.$store.state.warehouseInfo.warehouseId,

							})
							if (res.code == 2000) {
								let activityInfo = {
									activityId: res.data.activity && res.data.activity.activityId || ``,
									name: res.data.activity && res.data.activity.name || ``,
									startTime: res.data.activity && res.data.activity.startTime || ``,
									endTime: res.data.activity && res.data.activity.endTime || ``,
									// summary: res.data.activity && res.data.activity.summary || ``
								}
								//"type": 1, //类型[1：商品满赠 2：商品满减 3：商品满返]
								uni.navigateTo({
									url: `/page_activity/activeDetails?type=${res.data.activity && res.data.activity.type || ``}&activityId=${activityInfo.activityId}`
								})
							}
						}
					}
				})
				// uni.navigateTo({
				// 	url:'/page_public/commodityDetail'
				// })
			},
			//点击热门活动
			toTuijian(item) {
				// if (item.details.length > 0) {
				// 	uni.navigateTo({
				// 		url: `/page_public/commodityDetail?commodityId=${item.details[0].proNumber}`
				// 	})
				// } else {
				uni.navigateTo({
					url: `/page_public/publicClass?title=${item.name}&type=${item.type}&tag=${item.tag}`
				})
				// }
				// if (item.name == '新人有礼') {
				// 	uni.navigateTo({
				// 		url: '/page_activity/newcomerBenefits'
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: `/page_public/publicClass?title=${item.name}&type=${item.type}&tag=${item.tag}`
				// 	})
				// }

			},
			//点击品牌专区
			async toSearch(val, item) {
				let url = ``;
				if (val && val.value && val.value.length) {
					if (val.value[item - 1].type == 1) { //不关联
						return;
					} else if (val.value[item - 1].type == 2) { //关联商品
						uni.navigateTo({
							url: `/page_public/commodityDetail?commodityId=${val.value[item-1].objectId}`
						})
					} else if (val.value[item - 1].type == 3) { //关联活动
						let res = await listMallCommodityActivityCommodityPageInfo({
							currentPage: 1,
							pageSize: 4,
							activityId: val.value[item - 1].objectId,
							warehouseId: this.$store.state.warehouseInfo.warehouseId,

						})
						if (res.code == 2000) {
							let activityInfo = {
								activityId: res.data.activity && res.data.activity.activityId || ``,
								name: res.data.activity && res.data.activity.name || ``,
								startTime: res.data.activity && res.data.activity.startTime || ``,
								endTime: res.data.activity && res.data.activity.endTime || ``,
								// summary: res.data.activity && res.data.activity.summary || ``
							}
							//"type": 1, //类型[1：商品满赠 2：商品满减 3：商品满返]
							uni.navigateTo({
								url: `/page_activity/activeDetails?type=${res.data.activity && res.data.activity.type || ``}&activityId=${activityInfo.activityId}`
							})
						} else {
							this.Utils.toast(`${res.msg}`)
						}
						// uni.navigateTo({
						// 	url:`/page_activity/activeDetails?activityId=${}`
						// })
					}
				} else if (val == '搜索') {
					// this.$store.state.searchName = item.name
					uni.navigateTo({
						url: `/page_public/publicClass?title=${val}&brandId=${item.brandId}&active=3`
					})
				}

				return
				uni.navigateTo({
					url: `/page_public/publicClass?title=${val}`
				})
			},
			//点击品牌专区更多
			toBrand() {
				uni.navigateTo({
					url: `/page_public/brand`
				})
			},
			//点击活动专区
			toActive() {
				uni.navigateTo({
					url: '/page_activity/activeCenter'
				})
			},
			//点击消息
			toMessage() {
				uni.navigateTo({
					url: '/page_public/message'
				})
			},
			//点击扫一扫
			async toSaoyisao() {
				// let res = await this.jWeixin.getSign() //初始配置
				// console.log(res, '457');
				// if (res) {
				// 	let res1 = await this.jWeixin.toggle() //调用扫一扫
				// 	console.log(res1, '扫码返回结果');

				// }
				uni.scanCode({
					success: (r) => {
						console.log(r, '首页扫码');
						if (r.errMsg == 'scanCode:ok') {
							let path = r.path;
							path = decodeURIComponent(path);
							console.log(path, 'path');
							// let id = path.split('commodityId=')[1].split('&')[0];
							let id = path.split('=')[1].split('_')[0];
							let codeId = path.split('=')[1].split('_')[1];
							console.log(codeId);
							if (codeId == 1) {
								uni.navigateTo({
									url: `/page_public/commodityDetail?commodityId=${id}`
								})
							} else if (codeId == 3) {
								console.log('职员邀请');
								this.getMemberInfo(id);
								uni.setStorageSync('staffInviteId', id);

							}

						}
					}
				})
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/.nav .nav_item {
		width:1600rpx !important;
		white-space:nowrap !important;
	}
	.home_main {
		box-sizing: border-box;
		overflow: hidden;
		/* #ifdef H5 */
		padding-bottom: 100rpx;
		/* #endif */

		// height: 200px;
		.news {
			width: 100%;
			height: 80rpx;
			background: inherit;
			background-color: rgba(255, 241, 221, 1);
			border: none;
			border-radius: 10px;
			font-size: 28rpx;
			color:#333;
			line-height: 80rpx;
			display: flex;
			.news_left {
			width: 40rpx;
			height: 40rpx;
			margin-left: 10px;
			margin-top: 6px;
			image {
				width: 100%;
				height: 100%;
			}
			}
			.news_right {
				width: 24rpx;
				height: 24rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.home_bg_img {
	
		width: 100%;
		height: 340rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -9;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.swiper {
		height: 300rpx;
		width: 100%;
		border-radius: $border_radius_10;
		box-sizing: border-box;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.tuijian {
		width: 100%;
		height: 120rpx;
		color: $text_color_333;
		font-size: $font_size_12;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 20px;

		.tuijian_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 140rpx;
		}

		.itme_img {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}

	}

	.oneImg {
		width: 100%;
		// height: 400rpx;
		box-sizing: border-box;

		.one_left {
			width: 100%;
			// height: 100%;

			image {
				width: 100%;
				// height: 100%;
				border-radius: $border_radius_4;
			}
		}

	}

	.towImg {
		width: 100%;
		height: 350rpx;
		display: flex;
		box-sizing: border-box;

		.tow_left {
			width: 350rpx;
			height: 350rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: $border_radius_4;
			}
		}

		.tow_right {
			width: 350rpx;
			height: 350rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: $border_radius_4;
			}
		}
	}

	.threeImg {
		width: 100%;
		height: 400rpx;
		display: flex;
		box-sizing: border-box;

		.three_left {
			width: 45%;
			height: 100%;

		}

		.three_right {
			width: 55%;
			height: 100%;
			display: flex;
			flex-direction: column;

			.three_right_top {
				width: 100%;
				height: 50%;
			}

			.three_right_bottom {
				width: 100%;
				height: 50%;
			}
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: $border_radius_4;
		}
	}

	.pingpai {
		width: 100%;
		// height: 440rpx;
		box-sizing: border-box;

		.pinpai_top {
			width: 100%;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;

			.top_title {
				color: $text_color_333;
				font-weight: bold;
			}

			.top_genduo {
				color: $text_color_333;
				font-size: $font_size_14;
			}
		}

		.pinpai_btn {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 18rpx;

			.pinpai_item {
				width: 162rpx;
				height: 162rpx;
				border: 1px solid rgba(230, 230, 230, 1);
				border-radius: $border_radius_4;
				background-color: rgba(255, 255, 255, 1);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				text {
					font-size: $font_size_12;
					color: $text_color_333;
				}
			}
		}
	}

	.huodongone_img {
		width: 100%;
		// height: 200rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: $border_radius_4;
		}
	}

	.doyoulike {
		box-sizing: border-box;
		// height: 500px;
		width: 100%;

		.doyoulike_title {
			width: 100%;
			height: 40rpx;
			box-sizing: border-box;
			margin-top: 28rpx;
		}

		.doyoulike_list {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			// display: grid;
			// grid-template-columns: repeat(2, calc(100% / 2));
			// grid-gap: 20rpx;
		}
	}

	.coupon {
		width: 600rpx;
		max-height: 808rpx;
		background-color: transparent;

		/deep/.u-popup__content {
			background-color: transparent !important;
		}

		.coupon_title {
			// position: absolute;
			//     left: 0;
			//     top: 0;
			width: 600rpx;
			height: 220rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.coupon_content {
			width: 600rpx;
			max-height: 520rpx;
			background-color: #feb26a;
			border-bottom-left-radius: 40rpx;
			border-bottom-right-radius: 40rpx;

			.coupon_lists {
				max-height: 400rpx;
			}

			.coupon_list {
				width: 560rpx;
				height: 160rpx;
				margin: 20rpx;
				margin-top: 0;
				border-radius: 20rpx;
				position: relative;
				.list {
					width:280px;
					height:80px;
					display: flex;
					position: absolute;
					left: 0;
					top: 0;

					.content_left {
						width: 140rpx;
						text-align: center;
						line-height: 160rpx;
						font-size: 60rpx;
						margin-left: 20rpx;
						height: 160rpx;
					}

					.content_right {
						display: flex;
                        height: 160rpx;
						.content_title {
							    height: 160rpx;
							    margin-left: 36rpx;
							    padding: 20rpx;

							.content_title1 {
								font-size: 28rpx;
								color: #333333;
								margin-top: 15rpx;
								font-weight: 700;
								width: 340rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.content_title3 {
								font-size: 24rpx;
								color: #999999;
								margin-top: 20rpx
							}
						}

						.content_use {
							width: 108rpx;
							height: 48rpx;
							background-color: #fb575c;
							border-radius: 48rpx;
							color: #fff;
							margin-top: 100rpx;
							font-size: 28rpx;
							text-align: center;
							line-height: 48rpx;
						}

						.content_nouse {
							width: 120rpx;
							height: 90rpx;
							margin-top: 90rpx;
						}
					}

				}
			}

			.get_coupon {
				width: 510rpx;
				height: 68rpx;
				margin: 20rpx 45rpx 10rpx 45rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
	}
</style>